<template>
	<view class="container">
		<image class="l_logo" mode="widthFix"
			src="https://img.jinghushi.com/images/0/2025/10/usOH0W55Z3h9a0HQGSk0GIgTs8lCCT.png"></image>
		<view class="l_page_w" v-if="isWXlogin">
			<!-- <view class="l_message">去完成微信授权以继续使用</view> -->
			<view class="l_l_w_login_wp" @click.stop="getcheckMesage">
				<image src="/static/login_button.png"></image>
				<!-- #ifdef MP-ALIPAY -->
				<text>一键快捷登陆</text>
				<button class="l_w_login" v-if="ischecked" open-type="getPhoneNumber"
					@getphonenumber="getUserProfile">一键快捷登陆</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<text>微信快捷登陆</text>
				<button class="l_w_login" v-if="ischecked" @click="getUserProfile">微信快捷登陆</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<text>微信快捷登陆</text>
				<button class="l_w_login" v-if="ischecked" @click="loginH5">微信快捷登陆</button>
				<!-- #endif -->
			</view>
			<!-- #ifdef MP-WEIXIN || H5 -->
			<view class="l_mobile" @click="isWXlogin=!isWXlogin">账号密码登录</view>
			<!-- #endif -->
		</view>

		<view class="l_page_mobile" v-if="!isWXlogin">
			<view class="l_from">
				<view class="input-item">
					<text class="l_from_title">手机号码</text>
					<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile"
						@input="inputChange" />
				</view>
				<view class="input-item">
					<text class="l_from_title">密码</text>
					<input type="mobile" value="" placeholder="8-18位不含特殊字符的数字、字母组合" placeholder-class="input-empty"
						maxlength="20" password data-key="password" @input="inputChange" @confirm="toLogin" />
				</view>
			</view>
			<button class="confirm-btn" @tap="toLogin">登录</button>
			<!-- #ifdef MP-WEIXIN || H5 -->
			<view class="l_mobile" @click="isWXlogin=!isWXlogin">返回微信快捷登陆</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="l_mobile" @click="isWXlogin=!isWXlogin">返回一键快捷登陆</view>
			<!-- #endif -->
		</view>
		<view class="l_agreement">
			<!-- #ifdef MP-ALIPAY -->
			<radio @change="ischecked=!ischecked" :checked="ischecked" />
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN || H5 -->
			<radio @click="ischecked=!ischecked" :checked="ischecked" />
			<!-- #endif -->
			我已阅读并同意<text @click="navto('https://bpapi.jinghushi.com/dmq_agreement.html')">《用户协议》</text>和<text
				@click="navto('https://bpapi.jinghushi.com/dmq_policy.html')">《隐私政策》</text>
		</view>
		<view class="pub_no_login" @click="$navBack">暂不登录</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" :value="mid" before-close="true" mode="input" title="推荐人ID"
				placeholder="请输入推荐人ID" @confirm="dialogInputConfirm" @close="closeDialog"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				isWXlogin: true,
				mobile: '',
				password: '',
				mid: 0,
				checkedYin: 0,
				ischecked: false,
				code: ''
			}
		},
		onLoad(options) {
			if (options.mid) {
				this.mid = options.mid;
				uni.setStorageSync('mid', this.mid)
			}
			if (options.code) {
				this.code = options.code;
			}
		},
		methods: {
			...mapMutations(['login']),
			// 跳转上一个页面
			navNext(e) {
				const url = uni.getStorageSync('route')
				uni.removeStorageSync('route')
				this.$navHome(url || e || `/pages/blindBox/list`)

			},
			getcheckMesage() {
				if (!this.ischecked) {
					this.$api.msg('请勾选协议政策！');
					return;
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			downloadapp() {
				window.location.href = 'https://h5.bkyh.top/downapp/index.html';
			},
			navBack() {
				uni.setStorageSync('Jh_recotabshops', 1)
				this.navNext();
			},
			toRegist() {
				var url = this.mid > 0 ? 'register?id=' + this.mid : 'Recommended';
				uni.navigateTo({
					url
				})
			},
			Yinchange(e) {
				this.checkedYin = e.detail.value.length;
			},
			loginH5() {
				this.$axios('login/autoGzlogin', 'POST', 'member', {
					mid: this.mid,
					code: this.code,
				}).then(res => {
					if (res.data.code == 300001) {
						window.location.href = res.data.data;
					} else if (res.data.code == 200) {
						uni.setStorageSync('token', res.data.data);
						uni.setStorageSync('Jh_recotabshops', 1);
						this.navNext();
					}
				})

			},
			async toLogin() {
				if (!this.ischecked) {
					this.$api.msg('请勾选协议政策！');
					return;
				}
				var that = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								let obj = infoRes;
								obj.code = loginRes.code;
								obj.mid = that.mid;
								obj.mobile = that.mobile;
								obj.pwd = that.password;
								that.$axios('login/dologin', "POST", 'member', obj).then(
									res => {
										if (res.data.code == 200) {
											uni.setStorageSync('token', res.data.data
												.token);
											that.setVersionData()
											that.navNext();
										}
									})
							}
						});
					},
					fail: function(res) {
						console.log(res)
					}
				});
				// #endif
				// #ifdef H5
				that.$axios('login/dologin', "POST", 'member', {
					mobile: that.mobile,
					pwd: that.password,
					mid: that.mid
				}).then(res => {
					if (res.data.code == 200) {
						uni.setStorageSync('token', res.data.data.token);
						that.navNext();
					}
				})
				// #endif
			},

			navto(url) {
				if (url != "#" && url != "") {
					if (url.indexOf('http') == -1) {
						uni.navigateTo({
							url: url
						})
					} else {
						// #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY
						uni.navigateTo({
							url: "/pages/web/web-view?url=" + url
						})
						// #endif
						// #ifdef H5
						window.location.href = url
						// #endif
					}
				}
			},
			getUserProfile(e) {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.$axios('login/xcxlogin', 'POST', 'member', {
							mid: this.mid,
							code1: loginRes.code,
							aid: '9184'
						}).then(res => {
							if (res.data.code == 200) {
								console.log(this.$navTo);
								this.setVersionData()
								uni.setStorageSync('token', res.data.data);
								this.navNext();
							} else if (res.data.code == 40001) {
								this.$refs.inputDialog.open();
							}
						})
					},
					fail: err => {
						console.log(err);
						this.$api.msg('登录失败，请重试！')
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
					scopes: 'auth_base',
					success: res => {
						my.getPhoneNumber({
							success: (resMobile) => {
								let encryptedData = resMobile.response;
								this.$axios('login/xcxloginAlipay', 'POST', 'member', {
									code1: res.authCode,
									secureMobile: JSON.parse(encryptedData).response,
									mid: this.mid,
								}).then(res => {
									if (res.data.code == 200) {
										this.setVersionData()
										uni.setStorageSync('token', res.data.data);
										this.navNext();
									} else if (res.data.code == 40001) {
										this.$refs.inputDialog.open();
									}
								})
							},
							fail: (res) => {
								console.log(res);
								this.$api.msg('登录失败，请重试！')
							},
						});
					},
					fail: error => {
						console.log(error);
						this.$api.msg('登录失败，请重试！')
					}
				})
				// #endif
			},
			dialogInputConfirm(value) {
				let that = this;
				if (!value) return that.$api.msg('请输入推荐人ID');
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.$axios('login/bindmid', 'POST', 'member', {
							code: loginRes.code,
							agentid: value
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								that.$refs.inputDialog.close();
								that.setVersionData()
								that.navNext();
							}
						})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
					scopes: 'auth_base',
					success: res => {
						this.$axios('login/bindmidAlipay', 'POST', 'member', {
							code: res.authCode,
							agentid: value
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								that.$refs.inputDialog.close();
								that.setVersionData()
								that.navNext();
							}
						})
					}
				})
				// #endif
			},
			closeDialog() {
				this.$refs.inputDialog.close();
			},
			setVersionData() {
				const accountInfo = uni.getAccountInfoSync();
				this.$store.commit('upversion', accountInfo.miniProgram.version);
				uni.setStorageSync('ver', accountInfo.miniProgram.version);
				// uni.setStorageSync('ver', 111);
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.pub_no_login {
		font-size: 24rpx;
		color: #999;
		position: fixed;
		left: 0;
		right: 0;
		text-align: center;
		margin: auto;
		bottom: 80rpx;
	}

	.container {
		color: $font-color-dark;
		padding-top: 190rpx;
	}

	.l_logo {
		display: block;
		/* height: 108rpx; */
		margin: 40rpx auto 30rpx;
		width: 248rpx;
	}

	.l_page_w {
		padding: 40upx 20upx;
	}

	.l_message {
		font-weight: bold;
		line-height: 70upx;
		text-align: center;
	}

	.l_l_w_login_wp {
		color: #FFFFFF;
		position: relative;
		margin: 0 6%;
		text-align: center;
		height: 70upx;
	}

	.l_l_w_login_wp image {
		height: 100%;
		width: 544upx;
	}

	.l_l_w_login_wp text {
		font-size: 28upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.l_w_login {
		position: absolute;
		top: 0;
		color: #FFFFFF;
		font-size: 30upx;
		width: 100%;
		height: 70upx;
		opacity: 0;
	}

	.l_mobile {
		color: #6501ff;
		font-weight: bold;
		text-align: center;
		font-size: 28upx;
		padding: 30upx;
	}

	.l_page_mobile {
		padding: 0 20upx;
	}

	.l_from {
		padding: 0 40upx;
	}

	.input-item {
		/* background: $page-color-light; */
		border-radius: 4px;
		padding: 20upx 30upx;
		margin-bottom: 30upx;
		background: #f8f6fc;
	}

	.l_from_title {
		color: $font-color-base;
		font-size: 26rpx;
		line-height: 56rpx;
	}

	.input-item input {
		color: $font-color-dark;
		font-size: 26rpx;
		height: 60rpx;
		width: 100%;
		background: #f8f6fc;
	}

	.forget-password {
		color: #4399fc;
		font-size: $font-sm;
		margin-left: 10upx;
		text-decoration: underline;
	}

	.register-section {
		color: $font-color-base;
		font-size: 26rpx;
		text-align: center;
		position: relative;
		width: 100%;
	}

	.register-section text {
		color: $font-color-spec;
		margin-left: 10upx;
	}

	.confirm-btn {
		background: #13963B;
		border-radius: 50px;
		color: #fff;
		font-size: $font-lg;
		height: 76upx;
		line-height: 76rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		width: 92%;
	}

	.l_agreement {
		/* position: fixed; */
		top: 60px;
		bottom: 90upx;
		font-weight: bold;
		text-align: center;
		width: 100%;
		/* #ifdef H5 */
		margin-top: 30rpx;
		/* #endif */
	}

	.l_agreement text {
		color: #13963B;
		font-size: 26rpx;
	}
</style>